@for $i from 0 through 20 {
  .app-margin-#{$i} {
    margin: #{$i}px;
  }

  .app-margin-x-#{$i} {
    margin-left: #{$i}px !important;
    margin-right: #{$i}px !important;
  }

  .app-margin-y-#{$i} {
    margin-top: #{$i}px !important;
    margin-bottom: #{$i}px !important;
  }

  .app-margin-top-#{$i} {
    margin-top: #{$i}px !important;
  }

  .app-margin-left-#{$i} {
    margin-left: #{$i}px !important;
  }

  .app-margin-bottom-#{$i} {
    margin-bottom: #{$i}px !important;
  }

  .app-margin-right-#{$i} {
    margin-right: #{$i}px !important;
  }

  //负值
  .app-margin-m#{$i} {
    margin: -#{$i}px;
  }

  .app-margin-x-m#{$i} {
    margin-left: -#{$i}px !important;
    margin-right: -#{$i}px !important;
  }

  .app-margin-y-m#{$i} {
    margin-top: -#{$i}px !important;
    margin-bottom: -#{$i}px !important;
  }

  .app-margin-top-m#{$i} {
    margin-top: -#{$i}px !important;
  }

  .app-margin-left-m#{$i} {
    margin-left: -#{$i}px !important;
  }

  .app-margin-bottom-m#{$i} {
    margin-bottom: -#{$i}px !important;
  }

  .app-margin-right-m#{$i} {
    margin-right: -#{$i}px !important;
  }

}
